<template>
	<view class="">
		<image src="/static/work1.jpg" mode="" class="img_bg"></image>
		<view class="margin-l30 margin-r30 margin-t30">

			<!-- <view class=" justify-between align-center">
				<view class="searchInput">
					<image src="/static/search.png" class="search"></image>
					<input v-model="danger_name" type="text" class="search-input" placeholder-style="color:#999;font-size:28upx;" placeholder="请输入风险点名称" />
					<input v-model="danger_level" type="text" class="search-input" placeholder-style="color:#999;font-size:28upx;" placeholder="风险等级"/>
				</view>
				<view class="allButton padding-l30 padding-r30"  @tap="dangerFile">搜 索</view>
			</view> -->
			<!-- 文件 -->

			<uni-search-bar @confirm="search" @input="input" v-model="danger_name" placeholder="输入风险点名称"></uni-search-bar>

			<block v-for="(item,index) in list" :key="index">
				<view class="card margin-t30 relative" @tap="toDetail(item.id)">
					<view class="text-36">{{item.danger_name?item.danger_name:"-"}}</view>
					<view class="display justify-between margin-t22">
						<view class="font-gray1">风险分级</view>
						<view :class="item.danger_level==1?'font-0':item.danger_level==2?'font-1':item.danger_level==3?'font-2':item.danger_level==4?'font-3':''">{{item.danger_level_show?item.danger_level_show:"-"}}</view>
					</view>
					<view class="display justify-between margin-t22">
						<view class="font-gray1 ">风险点位置</view>
						<view :class="item.danger_level==1?'font-0':item.danger_level==2?'font-1':item.danger_level==3?'font-2':item.danger_level==4?'font-3':''">{{item.danger_position?item.danger_position:"-"}}</view>
					</view>
					<view class="display justify-between margin-t22">
						<view class="font-gray1 ">所属部门</view>
						<view :class="item.danger_level==1?'font-0':item.danger_level==2?'font-1':item.danger_level==3?'font-2':item.danger_level==4?'font-3':''">{{item.position_id?item.position_id:"-"}}</view>
					</view>
				</view>
			</block>
			<view class="loading">
				{{loadingText}}
			</view>
			<view class="text-center noNotice" v-show="isShow">
				<image src="/static/notice.png" class="noticeImg"></image>
				<view class="font-gray margin-t30">暂无风险点信息~</view>
			</view>
		</view>
	</view>
</template>

<script>
	var page = 1,
		timer;
	export default {
		data() {
			return {
				uid: '',
				token: '',
				danger_name: '',
				danger_level: '',
				list: [],
				isShow: false,
				loadingText: '上拉加载更多'
			}
		},
		onLoad() {
			let that = this;
			this.uid = uni.getStorageSync('user').uid;
			this.token = uni.getStorageSync('user').token;
			this.getUews();
		},
		onPullDownRefresh: function() {
			this.getUews();
		},
		onReachBottom: function() {
			let that = this
			if (timer != null) {
				clearTimeout(timer)
			}
			timer = setTimeout(function() {
				that.getMorenews();
			}, 500);
		},
		methods: {
			getUews() {
				page = 1;
				var that = this
				uni.showNavigationBarLoading();
				that.loadingText = '上拉加载更多'
				uni.request({
					url: 'https://aqmore.sxpz.vip/AppApi/Danger/index?uid=' + this.uid + '&token=' + this.token + '&p=' + page,
					method: 'GET',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success: function(res) {
						if (res.data.code == 200) {
							that.list = res.data.datas.dangers
							console.log(res.data)
							if (res.data.datas.dangers.length == 0) {
								that.isShow = true
							}
						} else if (res.data.code == 100) {
							console.log(res)
							uni.showToast({
								title: res.data.datas.msg,
								icon: 'none'
							})
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/index/index'
								})
								try {
									uni.removeStorageSync('user');
									console.log('chenggonmg')
								} catch (e) {
									// error
								}
							}, 1500)
						}
						uni.stopPullDownRefresh();
						uni.hideNavigationBarLoading();
						page++;
					},

				})
			},
			getMorenews() {
				var that = this
				if (that.loadingText == '已经加载全部风险点') {
					return false
				}
				that.loadingText = '加载中...'
				uni.showNavigationBarLoading();
				uni.request({
					url: 'https://aqmore.sxpz.vip/AppApi/Danger/index?uid=' + this.uid + '&token=' + this.token + '&p=' + page,
					method: 'GET',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success: function(res) {
						uni.hideNavigationBarLoading();
						if (res.data.code == 200) {
							if (res.data.datas.dangers.length == 0) {
								that.loadingText = '已经加载全部风险点';
								return false
							}
							var newlist = res.data.datas.dangers;
							that.list = that.list.concat(newlist)
							console.log(res.data)

						} else {
							that.isShow = true
						}
						uni.stopPullDownRefresh();
						page++;
						that.loadingText = '加载更多'
					},

				})
			},
			toDetail(e) {
				uni.navigateTo({
					url: '/pages/workspace/workDetial/points/pointsDetail?id=' + e
				})
			},
			input() {
				var that = this
				var list2 = []
				console.log(this.danger_name.value)
				if (this.danger_level == '') {

				}
				// console.log(this.token)
				// console.log(this.uid)
				uni.request({
					url: 'https://aqmore.sxpz.vip/AppApi/Danger/index?uid=' + this.uid + '&token=' + this.token + '&danger_name=' +
						this.danger_name.value,
					// +'&danger_level='+this.danger_level.value
					method: 'GET',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success: function(res1) {
						if (res1.data.code == 200) {
							console.log(res1.data.datas)
							that.list = res1.data.datas.dangers
						} else if (res1.data.datas.dangers) {
							this.isShow = true
						}

					},

				})
			}

		},
		onShow() {

		}


	}
</script>

<style>
	page {
		margin: 0;
		padding: 0;
		/* background-color: #0d98ed; */
	}

	.img_bg {
		width: 100%;
		height: 100%;
		position: fixed;
		background-size: 100% 100%;
		z-index: -1;

	}

	.searchInput {
		display: flex;
		background-color: #fff;
		align-items: center;
		height: 72upx;
		border-radius: 36upx;
		padding-left: 24upx;
	}

	.search-input {
		padding-left: 10upx;
		width: 480upx;
	}

	.search {
		width: 21upx;
		height: 21upx;
		vertical-align: middle;
	}

	.align-center {
		align-items: center;
	}

	.allButton {
		background: linear-gradient(90deg, rgba(63, 94, 255, 1), rgba(34, 150, 255, 1));
		border-radius: 36upx;
		color: #fff;
		height: 72upx;
		line-height: 72upx;
	}

	.padding-l30 {
		padding-left: 30upx;
	}

	.padding-r30 {
		padding-right: 30upx;
	}

	.margin-l30 {
		margin-left: 30upx;
	}

	.margin-r30 {
		margin-right: 30upx;
	}

	.margin-t30 {
		margin-top: 30upx;
	}

	.card {
		background-color: #fff;
		box-shadow: 0 2upx 8upx 0 rgba(0, 0, 0, 0.06);
		border-radius: 20upx;
		padding: 30upx 24upx;
	}

	.relative {
		position: relative;
	}

	.text-36 {
		font-size: 36upx;
	}

	.display {
		display: flex;
	}

	.justify-between {
		justify-content: space-between;
	}

	.margin-t22 {
		margin-top: 22upx;
	}

	.font-gray1 {
		color: #666;
	}

	.font-blue {
		color: #3F5EFF;
	}

	.font-0 {
		color: #3F5EFF;
	}

	.font-1 {
		color: #ffe200;
	}

	.font-2 {
		color: #ff5500;
	}

	.font-3 {
		color: #ff0000;
	}

	.loading {
		line-height: 2em;
		text-align: center;
		color: #808080;
		margin-top: 30upx;
	}
</style>
